<template>
	<view class="container">
		<view class="content">
			<view class="content-top">
				<view class="content-top-one d-rn d-ac d-jb">
					<text>
						<text class="red">*</text>
						{{ $t('shift_name') }}</text>
					<input type="text" :placeholder="$t('Please_enter_shift_name')" :disabled="form.disabled" v-model="form.shiftName" />
				</view>
				<view class="content-top-one d-rn d-ac d-jb">
					<text> <text class="red">*</text>{{ $t('Shift_Code') }}</text>
					<input type="text" :placeholder="$t('Please_enter_shift_code')" :disabled="form.disabled" v-model="form.shiftCode" />
				</view>
				<view class="content-top-one d-rn d-ac d-jb" @click="handleshowup">
					<text> <text class="red" v-if="is_work == 0">*</text>{{ $t('Work_Start_Time') }}</text>
					<input type="text" :placeholder="$t('Please_enter_work_start_time')" v-model="form.workTimeStart" :disabled="form.disabled" />
				</view>
				<view class="content-top-one d-rn d-ac d-jb" @click="handleshowdown">
					<text> <text class="red" v-if="is_work == 0">*</text>{{ $t('Work_End_Time') }}</text>
					<input type="text" :placeholder="$t('Please_enter_work_end_time')" v-model="form.workTimeEnd" :disabled="form.disabled" />
				</view>

				<view class="content-top-one d-rn d-ac d-jb" @click="handleshowdownDeadline">
					<text> <text class="red" v-if="is_work == 0">*</text>{{ $t('Clock_in_Deadline') }}</text>
					<input type="text" :placeholder="$t('Please_enter_clock_in_deadline')" v-model="form.clockInDeadline"
						:disabled="form.disabled" />
				</view>

				<view class="content-top-one d-rn d-ac d-jb" @click="handleshowdownStartTime">
					<text>{{ $t('Clock_out_Deadline') }}</text>
					<input type="text" :placeholder="$t('Please_enter_clock_out_deadline')" v-model="form.clockInStartTime"
						:disabled="form.disabled" />
				</view>




				<!-- <view class="content-top-one d-rn d-ac d-jb">
          <text>打卡范围</text>
          <view class="">
            <input
              type="number"
              :placeholder="address + '米内可打卡'"
              v-model="form.clockInDeadline[0].distance"
            />
          </view>
        </view> -->


				<view class="content-top-one" v-for="(item, index) of form.clockingPlace" :key="index">
					<view>
						<view class="content-title">
							<view> <text class="red" v-if="is_work == 0">*</text>{{ $t('clockIn_order_workPlace') }}</view>
							<text @click="delPlace(index)" v-if="!form.disabled">{{ $t('delete') }}</text>
						</view>
						<view style="padding: 10rpx; margin-top: 20rpx" class="d-rn d-ac" @click="selectLocation(item)">
							{{ item.address ? item.address : $t('Please_select_work_location') }}
						</view>
					</view>
					<view class="d-rn d-ac d-je">
						<input type="text" placeholder="" v-model="item.distance" :disabled="form.disabled"
							style="width: 100%; flex: 1" />
						<text class="red" v-if="is_work == 0">*</text>{{ $t('Meters_to_Clock_in') }}
					</view>
					<!-- </view> -->
				</view>
				<view class="content-add d-rn d-ac d-jc" @click="handleAddPosition" v-if="!form.disabled">
					<image src="../../static/img/addshangban.png" mode=""></image>
				</view>

				<view class="content-mark">
					<view class="content-mark-title">
						<text>{{ $t('clockIn_order_remark') }}</text>
					</view>
					<view class="content-mark-text" style="color: #333">
						<textarea name="" id="" cols="30" rows="10" :disabled="form.disabled"
							:placeholder="form.disabled ? '' : $t('Please_enter_remarks')" placeholder-style="color:#cccccc;"
							v-model="form.remark"></textarea>
					</view>
					<view class="content-mark-title">
						<text>{{ $t('clockIn_order_remark') }}</text>
						<text>{{ $t('Remarks_color') }}</text>
					</view>
					<view class="content-mark-color d-rn d-ac">
						<view class="content-mark-color-list d-rn d-ac d-jc" @click="handleChangeColor(item, index)"
							:style="{ background: item.back }" v-for="(item, index) in color" :key="index">
							<text class="d-rn d-ac d-jc">{{ item.color }}</text>
							<image src="../../static/img/blackSelect.png" mode="" v-if="item.sts"></image>
						</view>
					</view>
				</view>
			</view>

			<view class="mosts">
				<view class="mosts-title d-rn d-ac" @click="handleShowMost">
					<image src="../../static/img/bottom.png" mode="" :class="showMost ? 'imgT' : ''"></image>
					<text>{{ $t('Advanced_Settings') }}</text>
				</view>
				<view class="mosts-form" v-if="showMost">

				</view>
				<view class="mosts-form-one d-rn d-ac d-jb">
					<text>{{ $t('Punching_Mode') }}</text>
					<view class="mosts-form-one-right d-rn d-ac" @click="showPunchingMode = true">
						<text>{{
						form.punchingMode == 1 ? 'GPS' :  $t('GPS_Photo')
					}}</text>
						<image src="../../static/img/right.png" mode=""></image>
					</view>
				</view>

				<!-- 	<view class="mosts-form-one d-rn d-ac d-jb">
					<text>类型</text>
					<view class="mosts-form-one-right d-rn d-ac">
						<view class="mosts-form-one-right-one d-rn d-ac" v-for="(item, index) in 2" :key="index"
							@click="handleChangeWorkType(index)">
							<image :src="
									is_work_type == index
										? '../../static/img/comfirm.png'
										: '../../static/img/notConfirm.png'
								" mode=""></image>
							<text>{{ !index ? '工作' : '休息' }}</text>
						</view>
					</view>
				</view> -->

				<view class="mosts-form-one d-rn d-ac d-jb">
					<text>{{ $t('Allow_Field_Work') }}</text>
					<view class="mosts-form-one-right d-rn d-ac">
						<view class="mosts-form-one-right-one d-rn d-ac" v-for="(item, index) in 2" :key="index"
							@click="handleChangeWai(index)">
							<image :src="is_wai == !index
						? '../../static/img/comfirm.png'
						: '../../static/img/notConfirm.png'
						" mode=""></image>
							<text>{{ !index ? $t('Yes') : $t('No') }}</text>
						</view>
					</view>
				</view>
				<view class="mosts-form-one d-rn d-ac d-jb">
					<text>{{ $t('Is_Work_Shift') }}</text>
					<view class="mosts-form-one-right d-rn d-ac">
						<view class="mosts-form-one-right-one d-rn d-ac" v-for="(item, index) in 2" :key="index"
							@click="handleChangeType(index)">
							<image :src="is_work == index
						? '../../static/img/comfirm.png'
						: '../../static/img/notConfirm.png'
						" mode=""></image>
							<text>{{ !index ? $t('Yes') : $t('No') }}</text>
						</view>
					</view>
				</view>
				<view class="mosts-form-one d-rn d-ac d-jb">
					<text>{{ $t('Serious_Late') }}</text>
					<view class="d-rn d-ac">
						<input type="number" :disabled="form.disabled" :placeholder="$t('Serious_Late_Minutes')"
							v-model="form.seriouslyLate" style="text-align: right" />
						<!-- <text>分钟</text> -->
					</view>
				</view>
				<view class="mosts-form-one d-rn d-ac d-jb">
					<text>{{ $t('Serious_Leave_Early') }}</text>
					<view class="d-rn d-ac">
						<input type="number" :disabled="form.disabled" :placeholder="$t('Serious_Leave_Early_Minutes')"
							v-model="form.seriouslyLeaveEarly" style="text-align: right" />
						<!-- <text>分钟</text> -->
					</view>
				</view>
				<view class="mosts-form-one d-rn d-ac d-jb">
					<text>{{ $t('Absent') }}</text>
					<view class="d-rn d-ac">
						<input type="number" :disabled="form.disabled" :placeholder="$t('Absent_Minutes')" v-model="form.absenteeism"
							style="text-align: right" />
						<!-- <text>分钟</text> -->
					</view>
				</view>
			</view>
		</view>

		<!-- <view class="option d-rn d-ac" @click="handleZao"> -->
		<view class="option d-rn d-ac" style="padding:12px 12px 0" @click="handleZao">
			<image :src="allowed
						? '../../static/img/comfirm.png'
						: '../../static/img/notConfirm.png'
						" mode=""></image>
			<text>{{ $t('Allow_Late_Or_Leave_Early') }}</text>

		</view>

		<view class="mosts-form-one d-rn d-ac d-jb" v-if="allowed">
			<text>{{ $t('Allow_Late') }}</text>
			<view class="d-rn d-ac">
				<input type="number" :disabled="form.disabled" :placeholder="$t('Allow_Late_Minutes')" style="text-align: right"
					v-model="form.notLate" />

			</view>

		</view>
		<view class="mosts-form-one d-rn d-ac d-jb" v-if="allowed">
			<text>{{ $t('Allow_Leave_Early') }}</text>
			<view class="d-rn d-ac">
				<input type="number" :disabled="form.disabled" :placeholder="$t('Allow_Leave_Early_Minutes')" style="text-align: right"
					v-model="form.notLeaveEarly" />
			</view>

		</view>
		<!-- 占位 -->
		<view class="option d-rn d-ac" style="padding-bottom: 80px;">

		</view>
		<view v-if="!form.disabled" class="footer d-rn d-ac d-jc" @click="handleSubmit">
			<text class="d-rn d-ac d-jc">{{ $t('Save') }}</text>
		</view>

		<view>
			<u-datetime-picker ref="datetimePicker" :show="show" mode="time" @confirm="handleConfirm"
				@cancel="handlecancel"></u-datetime-picker>
		</view>
		<view>
			<u-datetime-picker ref="datetimePicker" :show="show1" mode="time" @confirm="handleConfirm1"
				@cancel="handlecancel"></u-datetime-picker>
		</view>
		<u-picker :show="showPunchingMode && !form.disabled" :columns="[['GPS', $t('GPS_Photo')]]" @confirm="changeHandler"
			@cancel="showPunchingMode = false"></u-picker>
		<view>
			<u-datetime-picker ref="datetimePicker" :show="showdownDeadline" mode="time"
				@confirm="handleConfirmDeadline" @cancel="handlecancel"></u-datetime-picker>
		</view>

		<view>
			<u-datetime-picker ref="datetimePicker" :show="showdownStartTime" mode="time"
				@confirm="handleConfirmStartTime" @cancel="handlecancel"></u-datetime-picker>
		</view>
	</view>
</template>

<script>
var _self;
import {
	Addclasses,
	updateclasses
} from '../../api/index.js';
export default {
	data() {
		return {

			show: false,
			show1: false,
			showdownDeadline: false,
			showdownStartTime: false,
			value1: '12:20',
			address: 0,
			color: [{
				color: this.$t('red'),
				back: '#FF6C64',
				sts: false,
			},
			{
				color: this.$t('blue'),
				back: '#4287FF',
				sts: false,
			},
			{
				color: this.$t('green'),
				back: '#63D5BF',
				sts: false,
			},
			],
			showMost: true,
			is_wai: false,
			is_work_type: 0,
			is_work: 0,
			allowed: true,
			form: {
				classesColour: '',
				shiftName: '',
				shiftCode: '',
				workTimeStart: '',
				workTimeEnd: '',
				distance: '',
				address: '中国',
				distance: '',
				remark: '',
				outwork: '',
				seriouslyLate: '',
				seriouslyLeaveEarly: '',
				absenteeism: '',
				clockingPlace: [],
				type: 1,
				punchingMode: 0,
			},
			name: '',
			showPunchingMode: false,
		};
	},
	onLoad(options) {
		_self = this;
		if (options && options.data) {
			_self.name = JSON.parse(decodeURIComponent(options.data)).titleName;
			if (_self.name == this.$t('add_new')) {
				_self.form = {
					classesColour: '',
					shiftName: '',
					shiftCode: '',
					workTimeStart: '',
					workTimeEnd: '',
					distance: '',
					address: '中国',
					distance: '',
					remark: '',
					outwork: '',
					seriouslyLate: '',
					seriouslyLeaveEarly: '',
					absenteeism: '',
					clockingPlace: [],
				};
			} else {
				_self.form = JSON.parse(decodeURIComponent(options.data));
				console.log('_self.form222', _self.form)
				_self.is_wai = _self.form.outwork;
				_self.is_work = _self.form.type == 1 ? 0 : 1
				_self.color.push({
					color: this.$t('current'),
					back: _self.form.shiftColor,
					sts: true,
				});
				console.log(_self.form);
			}
		}
		_self.timeWeekFormat();
	},
	methods: {
		changeHandler(val) {
			if (val.value[0] === 'GPS') {
				this.form.punchingMode = 1;
			} else {
				this.form.punchingMode = 0;
			}
			this.showPunchingMode = false;
		},
		delPlace(index) {
			this.$delete(this.form.clockingPlace, index);
		},
		selectLocation(item) {
			console.log('点击了选择上班地点');
			if (this.form.disabled) return;
			uni.chooseLocation({
				success: function (res) {
					item.address = res.address;
					item.latitude = res.latitude;
					item.longitude = res.longitude;
				},
			});
		},
		timeWeekFormat() {
			//定义一个日期对象;
			var dateTime = new Date();
			var hours = dateTime.getHours();
			//获得系统分钟;
			var minutes = dateTime.getMinutes();
			hours < 10 ? (hours = '0' + hours) : hours;
			minutes < 10 ? (minutes = '0' + minutes) : minutes;
			_self.value1 = hours + ':' + minutes;
			// return dateStr;
		},
		handleChangeColor(item, index) {
			if (this.form.disabled) return;
			_self.color.map((e) => {
				e.sts = false;
			});
			item.sts = !item.sts;
			_self.form.shiftColor = item.back;
		},
		handleShowMost() {
			_self.showMost = !_self.showMost;
		},
		handleChangeWai(index) {
			console.log('index', index)
			if (this.form.disabled) return;
			_self.is_wai = index ? 0 : 1;
			_self.form.outwork = index ? 0 : 1;
		},
		handleChangeType(index) {
			if (this.form.disabled) return;
			_self.is_work = index;
			// _self.form.type = index + 1;
		},
		handleChangeWorkType(index) {
			if (this.form.disabled) return;
			_self.is_work_type = index;
			_self.form.type = index + 1;
		},

		handleZao() {
			if (this.form.disabled) return;
			_self.allowed = _self.allowed == 1 ? 0 : 1;
		},
		handleAddPosition() {
			this.form.clockingPlace.push({
				address: null,
				distance: null,
				latitude: null,
				longitude: null,
			});
		},
		handleshowup() {
			_self.show = true;
		},
		handleshowdown() {
			_self.show1 = true;
		},
		handleshowdownDeadline() {
			this.showdownDeadline = true;
		},
		handleshowdownStartTime() {
			this.showdownStartTime = true;
		},
		handleConfirmDeadline(e) {
			_self.form.clockInDeadline = e.value;
			_self.showdownDeadline = false;



		},
		handleConfirmStartTime(e) {
			_self.form.clockInStartTime = e.value;
			_self.showdownStartTime = false;
		},
		handleConfirm(e) {
			_self.form.workTimeStart = e.value;
			_self.show = false;
		},
		handleConfirm1(e) {
			_self.form.workTimeEnd = e.value;
			_self.show1 = false;
		},
		handleUP() {
			uni.chooseLocation({
				success: function (res) {
					console.log('位置名称=', res.name);
					console.log('详细地址=', res.address);
					console.log('纬度=', res.latitude);
					console.log('经度=', res.longitude);
				},
			});
		},
		handlecancel() {
			_self.show = false;
			_self.show1 = false;
			_self.showdownDeadline = false;
			_self.showdownStartTime = false;
		},
		handleSubmit() {
			if (this.form.createTime) {
				delete this.form.createTime;
				delete this.form.updateTime;
			}


			if (!this.form.shiftName) {
				return uni.showToast({
					title: this.$t('Please_enter_shift_name'),
					icon: 'none'
				})
			}
			if (!this.form.shiftCode) {
				return uni.showToast({
					title: this.$t('Please_enter_shift_code'),
					icon: 'none'
				})
			}
			if (!this.form.workTimeStart && !this.is_work) {
				return uni.showToast({
					title: this.$t('Please_select_work_start_time'),
					icon: 'none'
				})
			}
			if (!this.form.workTimeEnd && !this.is_work) {
				return uni.showToast({
					title: this.$t('Please_select_shift_end_time'),
					icon: 'none'
				})
			}
			if (!this.form.clockingPlace.length && !this.is_work) {
				return uni.showToast({
					title: this.$t('Please_select_work_location'),
					icon: 'none'
				})
			}
			if (!this.form.clockInDeadline && !this.is_work) {
				return uni.showToast({
					title: this.$t('Please_select_clock_in_deadline'),
					icon: 'none'
				})
			}
			if (this.form.clockingPlace && this.form.clockingPlace.length && !this.is_work) {
				// this.form.clockingPlace.map(item => {
				// 	if (!item.address) {
				// 		return uni.showToast({
				// 			title: '请选择上班地点',
				// 			icon: 'none'
				// 		})
				// 	}
				// 	if (!item.distance) {
				// 		return uni.showToast({
				// 			title: '请输入打卡距离',
				// 			icon: 'none'
				// 		})
				// 	}
				// })
				const flag1 = this.form.clockingPlace.every(item => {
					return item.address
				});
				const flag2 = this.form.clockingPlace.every(item => {
					return item.distance
				});
				if (!flag1) {
					return uni.showToast({
						title: this.$t('Please_select_work_location'),
						icon: 'none'
					})
				}
				if (!flag2) {
					return uni.showToast({
						title: this.$t('Please_enter_punch_range'),
						icon: 'none'
					})
				}
			}


			// if (!this.form.clockInStartTime) {
			// 	return uni.showToast({
			// 		title: '请选择下班打卡截止打卡时间',
			// 		icon: 'none'
			// 	})
			// }

			if (!this.form.punchingMode) this.form.punchingMode = 0;
			if (!this.form.type) this.form.type = 1;
			console.log('form', this.form)
			let that = this;
			uni.showModal({
				title: this.$t('prompt'),
				content: this.$t('Are_you_sure_to_save'),
				cancelColor: '#353535',
				confirmColor: '#215AA0',
				cancelText: this.$t('cancel'),
				// showCancel: false,
				confirmText: this.$t('picker_confirm'),
				success: function (res) {
					if (res.confirm) {
						if (_self.name == _self.$t('add_new')) {
							Addclasses(_self.form).then((res) => {
								if (res.code == 200) {
									_self.$commonFun.showTips(res.msg);
									setTimeout(function () {
										_self.$commonFun.goUrl(1, '../shiftRoom/index');
									}, 2000);
								}
							});
						} else if (_self.name == this.$t('edit')) {
							updateclasses(this.form).then((res) => {
								if (res.code == 200) {
									_self.$commonFun.showTips(res.msg);
									setTimeout(function () {
										_self.$commonFun.goUrl(1, '../shiftRoom/index');
									}, 2000);
								}
							});
						}
					} else if (res.cancel) { }
				}
			})


		}

		// 	if (this.name == '新增') {
		// 		if (!this.form.shiftName) {
		// 			return uni.showToast({
		// 				title: '请输入班次名称',
		// 				icon: 'none'
		// 			})
		// 		}
		// 		if (!this.form.shiftCode) {
		// 			return uni.showToast({
		// 				title: '请输入班次代号',
		// 				icon: 'none'
		// 			})
		// 		}
		// 		if (!this.form.workTimeStart && !this.is_work) {
		// 			return uni.showToast({
		// 				title: '请选择上班时间',
		// 				icon: 'none'
		// 			})
		// 		}
		// 		if (!this.form.workTimeEnd && !this.is_work) {
		// 			return uni.showToast({
		// 				title: '请选择下班时间',
		// 				icon: 'none'
		// 			})
		// 		}
		// 		if (!this.form.clockingPlace.length && !this.is_work) {
		// 			return uni.showToast({
		// 				title: '请选择上班地点',
		// 				icon: 'none'
		// 			})
		// 		}
		// 		if (!this.form.clockInDeadline && !this.is_work) {
		// 			return uni.showToast({
		// 				title: '请选择上班打卡截止打卡时间',
		// 				icon: 'none'
		// 			})
		// 		}
		// 		if(this.form.clockingPlace && this.form.clockingPlace.length && !this.is_work){
		// 			this.form.clockingPlace.map(item=>{
		// 				if(!item.address){
		// 					return uni.showToast({
		// 						title: '请选择上班地点',
		// 						icon: 'none'
		// 					})
		// 				}
		// 				if(!item.distance){
		// 						return uni.showToast({
		// 							title: '请输入打卡距离',
		// 							icon: 'none'
		// 						})
		// 				}
		// 			})
		// 		}
		// 		// if (!this.form.clockInStartTime) {
		// 		// 	return uni.showToast({
		// 		// 		title: '请选择下班打卡截止打卡时间',
		// 		// 		icon: 'none'
		// 		// 	})
		// 		// }
		// 		if(!this.form.punchingMode)this.form.punchingMode = 0;
		// 		if(!this.form.type)this.form.type = 1;
		// 		console.log('form', this.form)

		// 		Addclasses(this.form).then((res) => {
		// 			if (res.code == 200) {
		// 				_self.$commonFun.showTips(res.msg);
		// 				setTimeout(function() {
		// 					_self.$commonFun.goUrl(1, '../shiftRoom/index');
		// 				}, 2000);
		// 			}
		// 		});
		// 	} else if (this.name == '编辑') {
		// 		if(!this.form.punchingMode)this.form.punchingMode = 0;
		// 		if(!this.form.type)this.form.type = 1;
		// 		updateclasses(this.form).then((res) => {
		// 			if (res.code == 200) {
		// 				_self.$commonFun.showTips(res.msg);
		// 				setTimeout(function() {
		// 					_self.$commonFun.goUrl(1, '../shiftRoom/index');
		// 				}, 2000);
		// 			}
		// 		});
		// 	}
		// },
	},
};
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
}

.content-title {
	display: flex;
	justify-content: space-between;

	text {
		color: #ee7575;
	}
}

.container {
	width: 100%;

	.content {
		width: 100%;

		&-top {
			background-color: #ffffff;

			&-one {
				padding: 24rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #ffffff;

				input {
					text-align: right;
					flex: 1;
				}
			}
		}

		&-add {
			margin: 24rpx 0;

			image {
				width: 502rpx;
				height: 88rpx;
			}
		}

		&-mark {
			padding: 24rpx;
			box-sizing: border-box;
			background-color: #ffffff;

			&-title {
				margin-bottom: 16rpx;

				text {
					font-size: 28rpx;
					color: #6c6c6c;
				}
			}

			&-text {
				textarea {
					font-size: 28rpx;
					color: #cccccc;
				}
			}

			&-color {
				&-list {
					width: 120rpx;
					height: 54rpx;
					border-radius: 12rpx;
					position: relative;
					margin-right: 30rpx;

					image {
						position: absolute;
						width: 20rpx;
						height: 20rpx;
						top: 60%;
						left: 85%;
					}

					text {
						font-size: 24rpx;
						color: #ffffff;
					}
				}
			}
		}
	}

	.mosts {
		width: 100%;

		&-title {
			padding: 24rpx;
			box-sizing: border;

			image {
				width: 24rpx;
				height: 16rpx;
				margin-right: 20rpx;
				transform: rotate(-90deg);
			}

			.imgT {
				transform: rotate(0deg);
			}

			text {
				font-size: 30rpx;
				font-weight: 600;
				color: #333333;
			}
		}

		&-form {
			width: 100%;
			background-color: #ffffff;

			&-one {
				padding: 24rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #eeeeee;

				text {
					font-size: 28rpx;
					color: #6c6c6c;
				}

				&-right {
					image {
						width: 32rpx;
						height: 32rpx;
					}

					&-one {
						image {
							margin-right: 20rpx;
						}
					}

					&-one:nth-of-type(1) {
						margin-right: 50rpx;
					}
				}
			}
		}
	}

	.option {
		width: 100%;
		padding: 24rpx;
		box-sizing: border-box;
		padding-bottom: 154rpx;
		box-sizing: border-box;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 16rpx;
		}

		text {
			font-size: 28rpx;
			color: #6c6c6c;
		}
	}

	.footer {
		width: 100%;
		height: 134rpx;
		background-color: #ffffff;
		position: fixed;
		bottom: 0%;
		left: 0%;

		text {
			width: 702rpx;
			height: 86rpx;
			background: #fed72e;
			border-radius: 43px;
			box-shadow: 0px 4px 8px 0px rgba(250, 222, 78, 0.5);
		}
	}
}

.red {
	color: red;
}
</style>